<template>
    <div>
        <div class="e-form">
            <BillTop @cancel="handleClose"></BillTop>
            <div class="tabs" style="margin-bottom:120px">
                <div class="tabs-title">基本信息</div>
                <div style="width: 100%" class="form">
                    <el-form :model="formData" :label-width="formLabelWidth" :rules="rulesBase" ref="ruleForm" class="demo-ruleForm">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="所属机构：">
                                    <span>{{userInfo.orgInfo.orgName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="合同名称：" prop="contractName">
                                    <el-input v-model="formData.contractName" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="币种：" prop="currencyId">
                                    <el-select v-model="formData.currencyId" @change="handleCurrency" placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="(
                                                item
                                            ) in currencyForm"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="经办人：">
                                    <span>{{userInfo.userName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="备注：">
                                    <el-input type="textarea" v-model="formData.contractContext" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="buttons">
                <el-button type="primary" style="background: #2e61d7" @click="addSave"
                    >保存</el-button
                >
                <el-button @click="handleClose">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import equimentLeaseIncomeApply from '@/api/balanceContractApi/equimentLeaseIncomeApi/equimentLeaseIncomeApply.js'
import call from '@/api/balanceContractApi/getCurrency.js'
import { showLoading, hideLoading } from '@/utils/common'
import { handleCurrency } from '@/pages/subcontract/common/contractCom.js'
export default {
    data () {
        return {
            //基础信息
            formData: {
                'advanceCharge': 0,
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': 0,
                'billId': '',
                'bondAmount': 0,
                'bondState': true,
                'contractAmount': 0,
                'contractContext': '',
                'contractName': '',
                'contractNumber': '',
                'currencyId': '0',
                'currencyName': '',
                'rmbName': '',
                'rmbRate': 0,
                'serverType': 0,
                'taxAmount': 0,
                'taxExcludedAmount': 0,
                'taxRate': 0,
                'serverUnitAmount': 0
            },
            formLabelWidth: '200px',
            ctAddressCode: [],
            currencyArr: [], //币种
            billid: '',
            rulesBase: {
                contractName: [
                    { required: true, message: '请输入合同名称', trigger: 'blur' },
                ],
                currencyId: [
                    { required: true, message: '请选择币种', trigger: 'change' },
                ],
                taxRate: [
                    { required: true, message: '请输入0-100的数字', trigger: 'blur' },
                ],
                advanceCharge: [
                    { required: true, message: '请输入预付款金额', trigger: 'blur' },
                ],
                bondState: [
                    { required: true, message: '请选择是否需要缴纳履约保证金：', trigger: 'change' },
                ],
                leaseType: [
                    { required: true, message: '请选择租赁类型：', trigger: 'change' },
                ],
                bondAmount: [
                    {
                        required: false,
                        validator: (rule, value, callback)=>{
                            if(this.formData.bondState) {
                                if(!this.formData.bondAmount || this.formData.bondAmount <= 0) {
                                    callback('应交履约保证金必须大于0')
                                }else{
                                    callback()
                                }
                            }else{
                                callback()
                            }

                        },
                        trigger: ['blur', 'change']
                    }
                ],
                contractContext: [
                    { required: true, message: '请输入备注', trigger: 'blur' },
                    { min: 1, max: 500, message: '最多输入500字', trigger: 'blur' }
                ],
            },
            leaseTypeList: [
                { value: 0, label: '外租' },
                { value: 2, label: '临租' },
            ]
        }
    },
    created () {
        //获取币种
        call.getCurrency().then(res=> {
            this.currencyArr = res
        })
    },
    mounted () {
        const { baseCyByOrgId } = this.userInfo
        this.formData.baseCurName = baseCyByOrgId.currencyName  //本位币
        this.formData.baseCurId = baseCyByOrgId.currency
        this.handleCurrency(this.formData.currencyId)
    },
    components: {
    },
    computed: {
        ...mapState({
            options: state => state.contract.ctClassify,
            userInfo: state => state.userInfo,
            currencyForm: state => state.equip.equipData.currencyForm//币种
        })
    },
    watch: {
        //监听是否应交保证金切换
        'formData.bondState': {
            handler (val) {
                console.log('bondAmount')
                this.rulesBase.bondAmount[0].required = val
                if(val === false) {
                    this.formData.bondAmount = 0
                }
                if(this.$refs.rulesBase) {
                    let dome =  this.$refs.rulesBase.fields.find(x=>x._props.prop === 'bondAmount')
                    if(dome) {
                        dome.onFieldBlur()
                    }
                }
            },
            immediate: true
        },
    },
    methods: {
        handleCurrency (val) {
            handleCurrency(val, this)
        },
        //新增基本信息
        addSave () {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    showLoading()
                    equimentLeaseIncomeApply.createInfo(this.formData).then(res=>{
                        hideLoading()
                        this.clientPop('info', '保存成功，是否继续？', ()=>{
                            this.$router.replace({
                                path: '/equimentLeaseIncomeApplyEdit',
                                query: {
                                    billid: res,
                                    name: 'mainInfo'
                                }
                            })
                        }, null, this.handleClose)
                    })
                } else {
                    return false
                }
            })
        },
        //取消
        handleClose () {
            hideLoading()
            this.$router.replace('/equimentLeaseIncomeContract')
        },
    },
}

</script>

<style lang='scss' scoped>
.buttons {
    left: 0;
}
.e-form {
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
.e-table{
    min-height: auto;
    background: #fff;
}
.separ{
   width: 30px;
   height: 40px;
   line-height: 18px;
   text-align: center;
}
.upload {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.upload-demo {
    display: flex;
    justify-content: center;
    align-items: center;
}

::v-deep.el-input--suffix .el-input__inner {
    padding-right: 5px;
}

</style>